
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />

	<title>Photopea - Scripts</title>

	<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
</head>

<body>
<div id="page">
	<div id="header"> 
		<a href="index.html" class="title">Learn Photopea</a> 
		<!--<p>Web-based image editor.</p>-->
		<a href="https://blog.photopea.com">Blog</a> |
		<a class="curr" href="index.html">Learn</a> |
		<a href="../tuts/index.html">Tutorials</a> |
		<a href="../api/index.html">API</a> |
		<a href="https://www.facebook.com/photopea">Facebook</a> |
		<a href="https://www.twitter.com/photopeacom">Twitter</a> 
	</div>	
	<div id="main" style="max-width:1000px;">
		<div id="sidebar" style="width:22%;">
			<h3>Topics</h3>
			<ul>
			<li class="lvl0"><a href="index.html">Introduction</a></li>
			<li class="lvl0"><a href="workspace.html">Workspace</a></li>
			<li class="lvl1"><a href="opening-saving.html">Open and Save</a></li>
			<li class="lvl1"><a href="navigation.html">Navigation</a></li>
			<li class="lvl1"><a href="image-size.html">Image size</a></li>
			<li class="lvl0"><a href="layers.html">Layers</a></li>
			<li class="lvl1"><a href="masks.html">Masks</a></li>
			<li class="lvl1"><a href="layer-styles.html">Layer Styles</a></li>
			<li class="lvl1"><a href="smart-objects.html">Smart Objects</a></li>
			<li class="lvl1"><a href="other-layers.html">Other Layers</a></li>
			<li class="lvl0"><a href="layer-manipulation.html">Layer Editing</a></li>
			<li class="lvl1"><a href="free-transform.html">Free Transform</a></li>
			<li class="lvl1"><a href="adjustments-filters.html">Adjust. &amp; Filters</a></li>
			<li class="lvl0"><a href="selections.html">Selections</a></li>
			<li class="lvl1"><a href="creating-selections.html">Make Selections</a></li>
			<li class="lvl1"><a href="advanced-selecting.html">Advanced Selecting</a></li>
			<li class="lvl1"><a href="refine-edge.html">Refine Edge</a></li>
			<li class="lvl1"><a href="moving-selected-data.html">Move Selected Data</a></li>
			<li class="lvl0"><a href="brush-tools.html">Brush Tools</a></li>
			<li class="lvl1"><a href="bt-basic.html">Basic Tools</a></li>
			<li class="lvl1"><a href="bt-advanced.html">Advanced Tools</a></li>
			<li class="lvl1"><a href="bt-smart.html">Smart Tools</a></li>
			<li class="lvl0"><a href="text.html">Text</a></li>
			<li class="lvl1"><a href="text-style.html">Text Style</a></li>
			<li class="lvl0"><a href="vector-graphics.html">Vector Graphics</a></li>
			<li class="lvl1"><a href="vg-structure.html">The Structure</a></li>
			<li class="lvl1"><a href="vg-manipulation.html">Editing Shapes</a></li>
			<li class="lvl1"><a href="vg-creating.html">Creating Shapes</a></li>
			<li class="lvl0"><a href="other.html">Other</a></li>
			<li class="lvl1"><a href="guides-grid-snapping.html">Guides &amp; Snapping</a></li>
			<li class="lvl1"><a href="animations.html">Animations</a></li>
			<li class="lvl1"><a href="layer-comps.html">Layer Comps</a></li>
			<li class="lvl1 active"><a href="scripts.html">Scripts</a></li>
			</ul>
		</div>
		<div id="content" style="width:78%;">
			<div class="post">			
<h1>Scripts</h1>

<p>In some cases, it is very useful to <b>automate</b> image editing. 
For example, we may need to have 30 copies of the layer, and place them all into a regular grid, 5 times 6, and gradually decrease their opacity.
Or if we need to rotate by 90 degrees each layer, that contains "rotate" in its name.</p>

<p>Photopea can execute scripts written in Javascript. It is very useful to know programming and the syntax of Javascript, 
however, even beginners can make simple scripts, which will do the job. You can learn how to write scripts from available demos.</p>

<p>Use the <b>Script window</b> (File - Script) to work with scripts. Here you can type (or paste) a new script,
and then click Run to execute it. Several demos are available in the top of the Script window.
Scripts can be also executed through the <a href="../api/index.html">Photopea API</a>.</p>

<img src="https://i.imgur.com/yH7MTi7.png" />

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-0885095539348241"
     data-ad-slot="5352893134"></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<h2>Document Model</h2>

<p>Scripts allow you to access the content of the document through Javascript code.
Instead of describing a new Document model, Photopea provides an interface similar to
<a href="https://www.adobe.com/content/dam/acom/en/devnet/photoshop/pdfs/photoshop-cc-javascript-ref-2015.pdf">Adobe's scripting interface</a>.
It means, that the same scripts, that you wrote previously for Adobe Photoshop, could be used in Photopea to do the same task.</p>

<p>There is a global object <code>app</code>, which represents the application. <code>app.activeDocument</code> lets you access the active document.
A document has properties (<code>width</code>, <code>height</code>, <code>layers</code>, <code>currentLayer</code>, ...) 
and methods (<code>resizeImage()</code>, <code>resizeCanvas()</code>, ...). 
A layer also has properties (<code>name</code>, <code>visible</code>, <code>opacity</code>, ...) 
and methods (<code>rotate()</code>, <code>translate()</code>, ...). You can learn more in the official reference or in demos.
Note, that many properties are <b>read-only</b>, you can not rewrite them directly (e.g. the width of the document - you must call resizeCanvas()).
</p>

<p>
Photopea extends the model of Photoshop by adding several new functions:
</p>

<table>
<tr><td>Document.saveToOE("png")</td><td>Converts the document into a binary file and sends the file to the outer environment (See 
<a href="../api/live.html">Live Messaging API</a>).<br/>
JPG and WEBP can have a quallity (0 to 1) after the colon (e.g. "jpg:0.8"). 
PSD can have a "true" after the colon: "psd:true", to produce minified PSDs (up to 4x smaller, but take 4x longer to generate).
</td></tr>
<tr><td>Layer.convertToSO()</td><td>Converts a layer (or a folder) into a Smart Object</td></tr>
<tr><td>App.open(url, as, asSmart)</td><td>Loads an image from URL. Set <code>asSmart</code> to true to paste an image into a current document as a smart object.
<code>as</code> is ignored.</td></tr>
</table>			
			</div>
			
			<h2 style="margin-top: 4em">Comments</h2>
			<div id="disqus_thread"></div>
			<script>   
			(function() { // DON'T EDIT BELOW THIS LINE
			var d = document, s = d.createElement('script');
			s.src = 'https://learn-photopea.disqus.com/embed.js';
			s.setAttribute('data-timestamp', +new Date());
			(d.head || d.body).appendChild(s);
			})();   
			</script>	
		</div>
	</div>
	<div id="footer">&copy; 2013-2018 support@photopea.com</div>
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-4249565-43', 'auto');  ga('send', 'pageview');
	</script>
</div>
</html>
